import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes: Array<RouteRecordRaw> = [
  // 重定向
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/refCreate",
    name: "refCreate",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/coreGrammar/refCreate.vue"
      ),
  },
  {
    path: "/reactiveCreate",
    name: "reactiveCreate",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/coreGrammar/reactiveCreate.vue"
      ),
  },
  {
    path: "/refReactive",
    name: "refReactive",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/coreGrammar/refReactive.vue"
      ),
  },
  {
    path: "/toref",
    name: "toref",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/coreGrammar/toref.vue"),
  },
  {
    path: "/computed",
    name: "computed",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/coreGrammar/computed.vue"
      ),
  },
  {
    path: "/watch1",
    name: "watch1",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/coreGrammar/watch1.vue"),
  },
  {
    path: "/watch2",
    name: "watch2",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/coreGrammar/watch2.vue"),
  },
  {
    path: "/watch3",
    name: "watch3",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/coreGrammar/watch3.vue"),
  },
  {
    path: "/watch4",
    name: "watch4",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/coreGrammar/watch4.vue"),
  },
  {
    path: "/watch5",
    name: "watch5",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/coreGrammar/watch5.vue"),
  },
  {
    path: "/watchEffect",
    name: "watchEffect",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/coreGrammar/watchEffect.vue"
      ),
  },
  {
    path: "/ref1",
    name: "ref1",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/coreGrammar/ref1.vue"),
  },
  {
    path: "/ref2father",
    name: "ref2father",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/coreGrammar/ref2father.vue"
      ),
  },
  {
    path: "/prop1fater",
    name: "prop1fater",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/coreGrammar/prop1fater.vue"
      ),
  },
  {
    path: "/hookFunction",
    name: "hookFunction",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/coreGrammar/hookFunction.vue"
      ),
  },
  {
    path: "/hook",
    name: "hook",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/hook/hook.vue"),
  },
  {
    path: "/routerLinkTo1",
    name: "routerLinkTo1",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/to/routerLinkTo1.vue"),
  },
  {
    path: "/routerLinkTo2",
    name: "routerLinkTo2",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/to/routerLinkTo2.vue"),
  },
  {
    path: "/main",
    name: "main",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/routerTest/main.vue"),
    children: [
      {
        name: "User",
        path: "/main/User",
        component: () => import("../views/routerTest/user/User.vue"),
      },
      {
        name: "Profile",
        path: "/main/Profile",
        component: () => import("../views/routerTest/user/Profile.vue"),
      },
    ],
  },
  {
    path: "/query1",
    name: "query1",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/queryCanshu/query1.vue"),
  },
  {
    path: "/query2",
    name: "query2",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/queryCanshu/query2.vue"),
    props(route) {
      console.log(route); //这里可以拿到路由的所有信息，对象形式展示
    },
  },
  {
    path: "/params1",
    name: "params1",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/paramsCanshu/params1.vue"
      ),
  },
  {
    path: "/params2/:id/:title/:content/:age/:name",
    name: "params2",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/paramsCanshu/params2.vue"
      ),
  },
  {
    path: "/piniaTest",
    name: "piniaTest",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/pinia/piniaTest.vue"),
  },
  {
    path: "/father",
    name: "father",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/props/father.vue"),
  },
  {
    path: "/mittTest",
    name: "mittTest",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/mitt/mittTest.vue"),
  },
  {
    path: "/mittTest2",
    name: "mittTest2",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/mitt/mittTest2.vue"),
  },
  {
    path: "/modelFather",
    name: "modelFather",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/vModel/modelFather.vue"),
  },
  {
    path: "/attrs1",
    name: "attrs1",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/attrs/attrs1.vue"),
  },
  {
    path: "/inject1",
    name: "inject1",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/inject&privide/inject1.vue"
      ),
  },
  {
    path: "/slotFather",
    name: "slotFather",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/slot/slotFather.vue"),
  },
  {
    path: "/shallowRefshallowReactive",
    name: "shallowRefshallowReactive",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/otherApi/shallowRefshallowReactive.vue"
      ),
  },
  {
    path: "/readonlyshallowReadonly",
    name: "readonlyshallowReadonly",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/otherApi/readonlyshallowReadonly.vue"
      ),
  },
  {
    path: "/toRaw",
    name: "toRaw",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/otherApi/toRaw.vue"),
  },
  {
    path: "/customRef",
    name: "customRef",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/otherApi/customRef/customRef.vue"
      ),
  },
  {
    path: "/teleport",
    name: "teleport",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/otherApi/teleport.vue"),
  },
  {
    path: "/suspense",
    name: "suspense",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/otherApi/suspense/suspense.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(), //history模式
  routes,
});

export default router;
